/*
 * @Author: yixin 
 * @Date: 2019-12-06 10:31:37 
 * @Last Modified by: yixin
 * @Last Modified time: 2020-05-28 14:04:27
 * 工程列表
 */
import React, { Component } from "react"
import { withRouter } from "react-router";
import styles from './project.less'
import Header from '@/components/header'
import { projectList } from '@/services'
import ProjectModal from '@/components/projectModal'
class ProjectList extends Component {

  constructor(props){
    super(props);
    this.state = {
      list: [],
    }
    this.mapStatus = [] // 图标点状态
  }

  async componentDidMount() {
    try {
      this.map = new AMap.Map('map');
       // 如果有预请求数据则直接渲染到地图
      if(sessionStorage.getItem('projectMap')){
        const { list } = JSON.parse(sessionStorage.getItem('projectMap'));
        list.map((item,index)=>{
          item.index = index+1
        })
        this.setState({ list },()=>{
          this.renderMap();
          sessionStorage.removeItem('projectMap')
        })
      }else{
        const data = await projectList();
        if(data.code == 200){
          const list = data.data;
          list.map((item,index)=>{
            item.index = index+1
          })
          this.setState({ list },()=>{
            this.renderMap();
          })
        }
      }
      
    } catch (error) {
      console.log(error)
    }
  }

  refresh = async () => {
    const data = await projectList();
    if(data.code == 200){
      this.setState({ list: data.data },()=>{
        this.renderMap();
      })
    }
  }

  handleClick = (e) => {
    const data = e.target.getExtData();
    setTimeout(()=>{ this.pModal && this.pModal.show(data) }, 100)
  }

  renderMap = () => {
    const point = []; //总数组
    const mapStatus = [];
    var marker;
    this.state.list.map((data, index)=>{
      if(data.mapLng && data.mapLat){
        point.push(new AMap.LngLat(data.mapLng,data.mapLat))
        mapStatus.push(this.state.list[index].isActive)
      } else{
        console.log('miss', data)
      }
    })
    this.mapStatus = mapStatus;
    var polyline2;
    AMap.convertFrom(point, 'gps', (status, result) => {
      if (result.info === 'ok') {
        var lnglats = result.locations; // Array.<LngLat>
        lnglats.map(((data,index)=>{
          let marker = new AMap.Marker({
              position: data,  
              content: this.renderIcon(index+1),
              extData: this.state.list[index],
              clickable: true,
          });
          marker.on('click', this.handleClick);
          marker.setLabel({
            content: this.state.list[index].projName, //设置文本标注内容
            position: 'top',
            offset: new AMap.Pixel(-18, -20)
          });
          this.map.add(marker);
        }))
        this.map.setFitView()
      }
    });
  }

  renderIcon = (index) => {
    return `<div class=${this.mapStatus[index-1]==1 ? styles.icon : styles.icon_disabled}>
      ${index}
    </div>`
  }
  
  render(){
    return (
      <div className={styles.projectList}>
        <Header>工程列表</Header>
        <div onClick={(e)=>{ e.stopPropagation() }} id="map" className={styles.map}></div>
        <img onClick={()=>{ this.map.setFitView() }} src={require('../assets/img/map/resize.png')} className={styles.resize} />
        <ProjectModal refresh={this.refresh} history={this.props.history} data={this.state.list} ref={el => { this.pModal = el }} />
      </div>
    )
  }
}
export default withRouter(ProjectList)